<template>
  <div class="navigator">
    <!--    左侧按钮-->
    <div class="flex-row-start-center">
      <div>
        <el-icon @click="drawer=true" class="expanded item">
          <Expand/>
        </el-icon>
      </div>
      <div>
        <el-icon @click="handleClickHome" class="expanded item">
          <HomeFilled/>
        </el-icon>
      </div>
    </div>
    <!--    右侧按钮-->
    <div class="right flex-row-center">
      <!--      设置按钮-->
      <el-icon @click="showSettingForm=true" class="item">
        <Setting/>
      </el-icon>
      <div class="font-size-14 margin-row-5">
        {{userStore.name}}
      </div>
      <el-dropdown style="margin-right: 20px">
        <el-avatar :size="35" shape="square" :src="userStore.avatar || defaultAvatar" class="avatar"></el-avatar>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-if="userStore.userId === 0" @click="router.push('/login')">登录</el-dropdown-item>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>我的练习</el-dropdown-item>
            <el-dropdown-item v-if="userStore.userId !== 0" @click="handleClickLoginOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>


    <!--设置弹出框-->
    <el-dialog v-model="showSettingForm" title="全局设置" :width="computedSizeByIsPc" draggable>
      <global-setting-form @submit="handleGbSettingSubmit" @cancel="showSettingForm=false"
                           :setting="gbSettingStore.globalSetting"></global-setting-form>
    </el-dialog>


    <!--  左侧菜单-->
    <el-drawer
        title="菜单"
        v-model="drawer"
        :direction="'ltr'"
        destroy-on-close
    >
      <RouteMenu @select="handleSelect"></RouteMenu>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from "vue";

import GlobalSettingForm from "@/components/form/GlobalSettingForm.vue";
import globalSettingStore from "@/store/globalSettingStore";
import {GlobalSetting} from "@/ts/setting";
import useUserStore from "@/store/userStore"
import RouteMenu from "@/views/nav/RouteMenu.vue";
import {isPC} from "@/utils/CommonUtil";
import {HomeFilled} from "@element-plus/icons";
import router from "@/router";
import {loginOut} from "@/api/user/UserApi";
import {ElMessage} from "element-plus";


let showSettingForm = ref(false)
let drawer = ref(false)
// 头像
let defaultAvatar = ref("http://119.3.255.192:9999/upload/u=1198773829,2119485589&fm=253&fmt=auto&app=138&f=JPEG.webp")
let avatar = ref('')
// 拿到pinia全局设置
let gbSettingStore = globalSettingStore()
let userStore = useUserStore()
let handleSelect = () => {
  drawer.value = false
}

function handleGbSettingSubmit(form: GlobalSetting) {

  Object.assign(gbSettingStore.globalSetting, form)
  showSettingForm.value = false
}
function handleClickLoginOut(){
  loginOut()
  ElMessage({
    type:"warning",
    message:"退出成功"
  })
  userStore.$reset()

}
function handleClickHome() {
  window.location.href = "/"
}

let computedSizeByIsPc = computed(() => {
  return isPC() ? '30%' : '100%'
})
</script>

<style scoped lang="less">
.navigator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  i {
    font-size: 18px;
  }

  .menu {
    //.el-menu-item,el-sub-menu,el-sub-menu__title{
    //  border-radius: 20px;
    //
    //  &:hover{
    //    color: whitesmoke;
    //    background-color: #6E35AE;
    //  }
    //}
  }

  .item {
    cursor: pointer;
    transition: all 0.3s;
    padding: 2px;
    margin-right: 0.5em;

    &:hover {
      color: var(--theme-color);
    }
  }

  .expanded {


  }

  .avatar {
    cursor: pointer;
    border: 2px solid transparent;
  }
}
</style>